<template>
    <div>
        <div>
            <el-descriptions title="商品明细">
                <el-descriptions-item label="商品ID">{{
                    prod.prodId
                }}</el-descriptions-item>
                <el-descriptions-item label="商品名称">{{
                    prod.prodName
                }}</el-descriptions-item>
                <el-descriptions-item label="SPU">{{
                    prod.prodSpu
                }}</el-descriptions-item>
                <el-descriptions-item label="图片">
                    <el-image
                        :src="prod.prodImage"
                        style="width: 50px; height: 50px"
                    ></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="更新时间">
                    {{ prod.createTime }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div>
            <el-button type="primary" @click="onAddSku">添加SKU</el-button>
        </div>
        <div>
            <el-table :data="prodInfoList" stripe style="width: 100%">
                <el-table-column prop="infoId" label="ID" width="100" />
                <el-table-column prop="prodName" label="商品名称" width="180" />
                <el-table-column prop="prodSku" label="SKU" width="180" />
                <el-table-column prop="prodPrice" label="售价" width="180" />
                <el-table-column prop="costPrice" label="成本价" width="180" />
                <el-table-column prop="prodStock" label="库存" width="180" />
                <el-table-column label="操作" />
            </el-table>
        </div>
        <div style="margin-top: 20px">
            <el-pagination
                v-model:current-page="searchForm.pageNum"
                v-model:page-size="searchForm.pageSize"
                :page-sizes="[2, 4, 6, 8]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <div>
            <el-dialog
                v-model="dialogFormVisible"
                title="添加商品SKU"
                width="500"
            >
                <el-form :model="form">
                    <el-form-item
                        label="商品名称"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.prodName" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="商品SKU" :label-width="formLabelWidth">
                        <el-input v-model="form.prodSku" autocomplete="off" />
                    </el-form-item>
                    <el-form-item
                        label="商品成本价"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.costPrice" autocomplete="off" />
                    </el-form-item>
                    <el-form-item
                        label="商品售价"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.prodPrice" autocomplete="off" />
                    </el-form-item>
                    <el-form-item
                        label="商品库存"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.prodStock" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false"
                            >取消</el-button
                        >
                        <el-button
                            type="primary"
                            @click="onSubmitAddInfo"
                        >
                            提交
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { getProdById, getProdInfoList, addProdInfo } from "@/api/prod";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";

const route = useRoute();
const prodId = route.params.prodId;
const prod = ref({
    prodId: 16,
    prodSpu: "xiaomimaojin",
    prodKind: 1,
    prodType: 1,
    prodName: "小米毛巾",
    brandId: 2,
    createBy: "匿名用户",
    createTime: "2025-07-24 15:16:22",
    updateBy: null,
    updateTime: null,
    unitId: 9,
    tagId: 3,
    appr: null,
    prodImage:
        "http://192.168.80.192:8888/group1/M00/00/00/wKhQwGhmrwaAYczpAACIkWBDYPU473.jpg",
    kindName: null,
    unitName: null,
    tagName: null,
    brandName: null,
    typeName: null,
});
const prodInfoList = ref([]);
const searchForm = ref({
    pageNum: 1,
    pageSize: 2,
    prodId: prodId,
});
const total = ref(0);

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = ref({
    costPrice: 0,
    prodId: 0,
    prodName: "",
    prodPrice: 0,
    prodSku: "",
    prodStock: 0,
});

// 添加商品SKU
const onSubmitAddInfo = () => { 
    addProdInfo(form.value).then((res) => { 
        if (res.data.code == 200) { 
            dialogFormVisible.value = false;
            ElMessage.success("添加成功");
            loadProdInfoList();
        }
        else {
            ElMessage.error(res.data.msg);
        }
    });
};


// 显示对话框
const onAddSku = () => {
    form.value = {
        costPrice: 0,
        prodId: 0,
        prodName: "",
        prodPrice: 0,
        prodSku: "",
        prodStock: 0,
    };
    form.value.prodId = prodId;
    dialogFormVisible.value = true;
};

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
    searchForm.value.pageSize = val;
    loadProdInfoList();
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    searchForm.value.pageNum = val;
    loadProdInfoList();
};

// 获取商品信息列表
const loadProdInfoList = () => {
    searchForm.value.prodId = prodId;
    getProdInfoList(searchForm.value).then((res) => {
        if (res.data.code == 200) {
            prodInfoList.value = res.data.data.records;
            total.value = res.data.data.total;
        }
    });
};

// 页面加载钩子函数
onMounted(() => {
    getProdById(prodId).then((res) => {
        if (res.data.code == 200) {
            prod.value = res.data.data;
        }
    });

    // 获取商品SKU列表
    loadProdInfoList();
});
</script>

<style scoped></style>
